<template>
  <div class="" v-if="currentQuestion && !currentQuestion.answerScoreable">
    <Stem :index="currentQuestionIndex" :data="stem" />
    <!-- 批改结果 -->
    <div class="module-item flex text-333 font-medium mt-20px mb-12px">
      <div class="rect mr-6px"></div>
      <div class="">
        批改结果如下{{
          currentQuestion.remoteStudentAnswer.studentAnswerUrl
            ? currentQuestion.remoteStudentAnswer.status == 10
              ? '(老师未批改)'
              : ''
            : '(学生未作答)'
        }}
      </div>
    </div>
    <div class="flex">
      <el-image
        :src="currentQuestion.remoteStudentAnswer.teacherDataUrl"
        :preview-src-list="[currentQuestion.remoteStudentAnswer.teacherDataUrl]"
        fit="contain"
        v-show="currentQuestion.remoteStudentAnswer.teacherDataUrl"
      />
    </div>
    <!-- answer -->
    <div class="module-item flex text-333 font-medium mt-20px mb-12px">
      <div class="rect mr-6px"></div>
      <div class="">答案</div>
    </div>
    <div
      class="answer p-20px bg-F4F7FB text-333"
      style="white-space: break-spaces; word-break: break-all"
      v-html="answerHtml"
    ></div>
    <!-- explanation -->
    <div class="module-item flex text-333 font-medium mt-20px mb-12px">
      <div class="rect mr-6px"></div>
      <div class="">解析</div>
    </div>
    <div
      class="explanation p-20px bg-F4F7FB text-333"
      style="white-space: break-spaces; word-break: break-all"
      v-html="explanationHtml"
    ></div>
  </div>
</template>

<script>
import Stem from '@/components/question/stem/index'
import { mapState } from 'vuex'
import { formatQuestionStem, formatQuestionAnswer } from '@/utils/question'

export default {
  components: {
    Stem
  },
  props: {
    questions: {
      type: Array,
      default: () => {
        return []
      }
    },
    questionIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(['homework']),
    currentQuestionIndex() {
      return this.questionIndex
    },
    currentQuestion() {
      return this.questions[this.questionIndex]
    },
    stem() {
      const {
        stem: stemString,
        questionSplit: { stem },
        typeName
      } = this.currentQuestion

      const { type = '未知题型' } = stem ? stem : {}

      return formatQuestionStem(stemString, {
        label: typeName,
        type
      })
    },
    answerHtml() {
      const { answer } = this.currentQuestion

      return answer
    },
    explanationHtml() {
      const { explanation } = this.currentQuestion

      if (!explanation)
        return '<div class="qml-explanation"><p class="paragraph" style=""><span>无</span></p></div>'

      return explanation.replace(/<p/g, '<p class="paragraph"')
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.tips {
  font-size: 18px;
  line-height: 18px;
}

.camera {
  width: 80px;
  height: 80px;
  box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.04);
  border-radius: 10px;

  .icon {
    width: 80px;
    height: 80px;
  }
}

.module-item {
  font-size: 26px;
  line-height: 26px;

  .rect {
    width: 4px;
    height: 26px;
    background: linear-gradient(180deg, #51c3ff 0%, #31b3f7 100%);
    border-radius: 3px;
  }
}

.answer,
.explanation {
  font-size: 26px;
  line-height: 26px;
  border-radius: 8px;
}

/deep/ .qml-explanation {
  .qml-seg {
    color: #333;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .paragraph {
    color: #333;
    margin-top: 12px;
  }
}
</style>
